import { cloneElement, JSX, ReactNode } from "react";
import clsx from "clsx";
import styles from "./style.module.css";
interface SkeletonProps {
  loaded: boolean;
  children: ReactNode;
  className?: string;
  style?: string;
  ref?: any;
}
const Skeleton: React.FC<SkeletonProps> = (props) => {
  const { loaded, children, className, style = {}, ref } = props;
  return loaded ? (
    cloneElement(children as JSX.Element, { className, style })
  ) : (
    <div ref={ref} className={clsx(styles.skeleton, className)} style={style}></div>
  );
};

export default Skeleton;
